<template>
  <div>
    <!-- 搜索条 -->
    <div class="search">
      <div class="search-content">
        <div class="search-input">
          <icon type="search" size="18"></icon>
          <input
            @input="handleInput"
            v-model="keyword"
            placeholder="请输入关键字"
            @confirm="handleHistory"
          />
        </div>
        <!-- 取消按钮 -->
        <button class="cancel" v-if="keyword" @click="cancelHandle">
          取消
        </button>
        <!-- 搜索结果列表 -->
        <div class="search-modal" v-show="keyword">
          <div
            :key="index"
            v-for="(item, index) in resultList"
            class="search-item"
          >
            {{ item.goods_name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 清空搜索历史 -->
    <div class="history">
      <h4>搜索历史</h4>
      <icon type="cancel" color="#C9C9C9" size="20" @click="clearHandle"></icon>
    </div>
    <!-- 搜索历史关键字列表 -->
    <div class="history-list">
      <div class="history-item" v-for="(item, i) in historyKey" :key="i">
        <navigator :url="'/pages/search_list/main?keyword=' + item">
          {{ item }}
        </navigator>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";
export default {
  data() {
    return {
      // 搜索/输入的关键字
      keyword: "",
      // 搜索的结果列表
      resultList: [],
      // 控制发送请求的频率
      isLoading: false,
      // 定时任务
      timer: null,
      // 历史关键字
      historyKey: wx.getStorageSync("history") || [],
    };
  },
  methods: {
    clearHandle() {
      // 清空本地历史缓存
      wx.clearStorageSync();
      // 页面数据也要清空
      this.historyKey = [];
    },
    handleHistory() {
      // 如果关键字是空的就终止储存
      if (this.keyword.trim() == "") {
        return;
      }
      // 搜索关键字回车时，记录历史
      // 像数组中的前面放一项数据
      this.historyKey.unshift(this.keyword.trim());
      // 数组的去重方式(new Set()类型数据不允许有重复的，与数组存储方式类似)
      this.historyKey = [...new Set(this.historyKey)];
      // 把数据存储在本地缓存中
      wx.setStorageSync("history", this.historyKey);
      // 按下回车键跳转页面（手动进行页面跳转）
      wx.navigateTo({
        url: "/pages/search_list/main?keyword=" + this.keyword,
      });
    },
    cancelHandle() {
      // 取消搜索，就是把关键字置空
      this.keyword = "";
    },
    // 限制发送请求：方法一
    // handleInput() {
    //   // 采用函数节流的方式降低发送亲求的频率
    //   // 函数节流：在每一段特定的时间内，都触发一次任务
    //   // 在指定的时间范围内，只会产生一次异步任务
    //   // 只有当前任务执行成功后，才允许产生下一个任务
    //   if (this.isLoading) {
    //     console.log(this.isLoading);
    //     // 终止后续代码执行
    //     return;
    //   }
    //   // 表示正在调用接口（阻止再次发送请求，直到请求响应成功）
    //   this.isLoading = true;
    //   // 接口调用
    //   setTimeout(async () => {
    //     // 当关键字变化时应该调用后台接口查询关键字对应的商品列表
    //     // 频繁输入关键字，只在最后停下来的时候，发送请求（通过定时任务实现）
    //     const res = await request("goods/search", { query: this.keyword });
    //     // console.log(res);
    //     // 更新页面数据
    //     this.resultList = res.data.message.goods;
    //     // 重置isLoading,开启新的请求（允许再次发送请求）
    //     this.isLoading = false;
    //   }, 1000);
    // },
    // 限制发送请求：方法二
    handleInput() {
      // 定时任务在延时时间范围内，如果被销毁，那么就不会再出发
      // 函数防抖：在指定时间内没有触发特定条件（输入框字符变化），那么就执行一次任务（发送一次请求）
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        const res = await request("goods/search", { query: this.keyword });
        this.resultList = res.data.message.goods;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
@import "./main.less";
</style>
